<template>
  <div>
    <h1>App</h1>

    <button @click="fn1">$on 监听</button>
    <button @click="fn2">$emit 触发</button>

    <button @click="showHome = !showHome">Toggle</button>
    <hr />

    <Home v-if="showHome" />

    <Category />
  </div>
</template>

<script>
import Home from "./components/Home.vue";
import Category from "./components/Category.vue";

// 导出组件的配置对象
export default {
  components: {
    Home,
    Category,
  },

  data() {
    return {
      showHome: true, // 用于控制 Home 组件的渲染
      tabs: [
        { label: "首页", name: "Home" },
        { label: "分类页", name: "Category" },
        { label: "购物车", name: "Cart" },
      ],
      curTabName: "Home",
    };
  },

  methods: {
    fn1() {
      console.log(this);
      this.$off("abcd"); // 取消监听

      // 监听
      this.$on("abcd", () => {
        console.log("abcd 被触发了");
      });
    },

    fn2() {
      // 触发同一个实例对象上的 abcd 事件
      this.$emit("abcd");
    },
  },
};
</script>

<style>
@import "./global.css";
</style>
